<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="security" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>添加</title>
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/resource/css/animate.css" rel="stylesheet"/>
    <link href="/resource/css/style.css?v=20200903" rel="stylesheet"/>
    <link href="/resource/ruoyi/css/ry-ui.css?v=4.6.0" rel="stylesheet"/>
    <link href="/resource/ajax/libs/layui/layui.css" rel="stylesheet"/>
    <link rel='stylesheet' href='/static/plugins/timepicker/bootstrap-timepicker.min.css'/>
    <link rel="stylesheet" href="/static/components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"/>
    <link href="/resource/ajax/libs/datapicker/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link href="/resource/ajax/libs/elementui/css/index.css" rel="stylesheet">
    <script src="/resource/ajax/libs/elementui/vue.js"></script>
    <script src="/resource/ajax/libs/elementui/index.js"></script>
    <style>
        #app{margin:35px 0;}
        em {
            color: #c41412;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <form id="projectContractForm" method="post" class="form-horizontal">
                <div class="form-group">
                    <div class="col-sm-12">
                        <div id="app">
                            <el-steps :active="8" align-center>
                                <el-step title="发起" description="申请部门"></el-step>
                                <el-step title="受理" description="审计处"></el-step>
                                <el-step title="审核" description="咨询单位"></el-step>
                                <el-step title="审核" description="审计处"></el-step>
                                <el-step title="反馈" description="申请部门"></el-step>
                                <el-step title="审阅" description="审计处"></el-step>
                                <el-step title="合同上传" description="申请部门"></el-step>
                                <el-step title="完成"></el-step>
                            </el-steps>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">合同名称<em>*</em></label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="name" id="name" placeholder="合同名称">
                    </div>
                </div>
                <c:if test="${type==1}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">关联招标</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                            <select class="form-control" name="projectTenderId" id="projectTenderId">
                                <option value="">-----选择可关联的招标-----</option>
                                <c:forEach items="${projectTenderList}" var="projectTender">
                                    <option value="${projectTender.id}">${projectTender.tenderFileName}</option>
                                </c:forEach>
                            </select>
                                <span class="input-group-btn">
									<button class="btn btn-default" type="button" id="viewTenderDetail"><span class="fa fa-refresh"></span>查看</button>
								</span>
                            </div>
                        </div>
                    </div>
                </c:if>
                <div class="form-group">
                    <label for="number" class="col-sm-2 control-label">招标编号</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="purchaseNumber" id="purchaseNumber" placeholder="招标编号">
                    </div>
                    <label for="number" class="col-sm-2 control-label">合同编号<em>*</em></label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="number" id="number" placeholder="合同编号">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">类型<em>*</em></label>
                    <div class="col-sm-4">
                        <select class="form-control" name="projectContractTypeId" id="projectContractType" required>
                            <option value="">-----请选择类型-----</option>
                            <c:forEach items="${projectContractTypeList}" var="projectContractType">
                                <option value="${projectContractType.id}">${projectContractType.contractTypeName}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <label class="col-sm-2 control-label">乙方单位<em>*</em></label>
                    <div class="col-sm-4">
                        <select class="form-control" name="signOrganizationId" id="signOrganizationId" required>
                            <option value="">-----请选择乙方单位-----</option>
                            <c:forEach items="${organizationList}" var="organization">
                                <option value="${organization.id}">${organization.organizationValue}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">乙方单位联系人<em>*</em></label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="signContact" id="signContact" placeholder="乙方单位联系人" required>
                    </div>
                    <label class="col-sm-2 control-label">乙方单位联系电话<em>*</em></label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="signPhone" id="signPhone" placeholder="乙方单位联系电话" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">签订日期<em>*</em></label>
                    <div class="col-sm-4">
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="text" class="form-control pull-right datetimepicker" name="signDate" id="signDate" placeholder="签订日期" required>
                        </div>
                    </div>
                    <label class="col-sm-2 control-label">合同金额<em>*</em></label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <div class="input-group-addon">&yen;</div>
                            <input type="number" min="0" step="1" class="form-control" name="amount" id="amount" placeholder="合同金额">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">合同内容<em>*</em></label>
                    <div class="col-sm-10">
                        <textarea class="form-control" colspan="5" name="mainContent" id="mainContent" placeholder="请输入合同主要内容及合同支付约定条款等"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">暂列金额</label>
                    <div class="col-sm-2">
                        <div class="input-group">
                            <div class="input-group-addon">&yen;</div>
                            <input type="number" min="0" step="1" class="form-control" name="provisionalSum" id="provisionalSum" placeholder="暂列金额">
                        </div>
                    </div>
                    <label class="col-sm-2 control-label">暂估价</label>
                    <div class="col-sm-2">
                        <div class="input-group">
                            <div class="input-group-addon">&yen;</div>
                            <input type="number" min="0" step="1" class="form-control" name="provisionalValuation" id="provisionalValuation" placeholder="暂估价">
                        </div>
                    </div>
                    <label class="col-sm-2 control-label">人工费</label>
                    <div class="col-sm-2">
                        <div class="input-group">
                            <div class="input-group-addon">&yen;</div>
                            <input type="number" min="0" step="1" class="form-control" name="laborCost" id="laborCost" placeholder="人工费">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">合同初稿</label>
                    <div class="col-sm-10">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="uploadFile">上传文件</button>
                        </div>
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                <tr>
                                    <th>文件名</th>
                                    <th>上传人</th>
                                    <th>上传时间</th>
                                    <th>文件大小</th>
                                </tr>
                                </thead>
                                <tbody id="uploadFileList"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div id="uploadFileResult"></div>
                        <input type="hidden" id="projectId" name="projectId" value="${project.id}">
                        <input type="hidden" id="type" name="type" value="${type}">
                        <button type="submit" class="btn btn-primary" id="contractBtn">提交</button>
                        <button class="btn btn-default" id="closeIframe">关闭窗口</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/resource/js/jquery.min.js"></script>
<script src="/resource/js/bootstrap.min.js"></script>
<script src="/resource/ajax/libs/layui/layui.js"></script>
<script src="/resource/ajax/libs/datapicker/bootstrap-datetimepicker.min.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return { visible: false }
        }
    });
    $(function () {
        //关闭iframe
        //注意：parent 是 JS 自带的全局对象，可用于操作父页面
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        $('#closeIframe').click(function (e) {
            e.preventDefault();
            parent.location.reload();
            parent.layer.close(index);
        });
        var picker = $('.datetimepicker').datetimepicker({
            format: 'YYYY-MM-DD',
        });
        $('#projectTenderId').change(function() {
            if($('#projectTenderId').val()==''){
                $('#purchaseNumber').val('');
                $('#amount').val('');
                $('#signOrganizationId').val('').select2();
            }else{
                $.get("/project/tender/getJson",{projectTenderId:$('#projectTenderId').val()},function(data){
                    if(data.code==0){
                        $('#purchaseNumber').val(data.projectTender.tenderNumber);
                        $('#amount').val(data.projectTender.bidAmount);
                        $("#projectTenderId").val(data.projectTender.id).select2();
                        $("#signOrganizationId").val(data.projectTender.bidOrganization).select2();
                    }
                })
            }
        });
        $('#contractBtn').click(function (e) {
            e.preventDefault();
            var number = $('#number').val();
            var name = $('#name').val();
            var projectTenderId = $('#projectTenderId option:selected').val();
            var projectContractType = $('#projectContractType option:selected').val();
            var signOrganizationId = $('#signOrganizationId').val();
            var signContact = $('#signContact').val();
            var signPhone = $('#signPhone').val();
            var signDate = $('#signDate').val();
            var amount = $('#amount').val();
            var mainContent = $('#mainContent').val();

            if (!number) {
                layer.tips('合同编号不能为空', '#number');
                return;
            }
            if (!name) {
                layer.tips('合同名称不能为空', '#name');
                return;
            }
            <c:if test="${type==1}">
            if (!projectTenderId) {
                layer.tips('关联的招标不能为空', '#projectTenderId');
                return;
            }
            </c:if>
            if (!projectContractType) {
                layer.tips('类型不能为空', '#projectContractType');
                return;
            }
            if (!signOrganizationId) {
                layer.tips('乙方单位不能为空', '#signOrganizationId');
                return;
            }
            if (!signContact) {
                layer.tips('乙方联系人不能为空', '#signContact');
                return;
            }
            if (!signPhone) {
                layer.tips('乙方联系方式不能为空', '#signPhone');
                return;
            }
            if (!signDate) {
                layer.tips('签订日期不能为空', '#signDate');
                return;
            }
            if (!amount) {
                layer.tips('合同金额不能为空', '#amount');
                return;
            }
            if (!mainContent) {
                layer.tips('合同内容不能为空', '#mainContent');
                return;
            }
            layer.msg('正在处理中...', {time: 0, icon: 16, shade: 0.01});
            $.ajax({
                dataType: "json",
                url: "/project/contract/saveOrUpdate",
                type: "post",
                data: $("#projectContractForm").serialize(),
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg(data.message, {
                            icon: 1
                        });
                        setTimeout(function () {
                            parent.layer.close(index);
                            parent.location.reload();
                        }, 3000);
                    } else {
                        layer.msg(data.message, {
                            icon: 5
                        });
                    }
                },
                error: function (e) {
                    var d = e.responseJSON;
                    if (d) {
                        layer.msg(d.message, {
                            icon: 5
                        });
                    }
                }
            });
        })
        $('#viewTenderDetail').bind('click',function (e) {
            e.preventDefault();
            var projectTenderId = $('#projectTenderId').val();
            if(!projectTenderId){
                layer.msg('请先选择相关招标记录', {icon: 5});
                return ;
            }
            layer.open({
                type: 2,
                title: '招标详情',
                shadeClose: false,
                shade: 0.5,
                scrollbar: false,
                area: ['90%', '95%'],
                content: '/project/tender/detailOnly?projectTenderId='+projectTenderId
            });
        });
        var projectId = $('#projectId').val();
        var getProject = function(){
            $.ajax({
                dataType: "json",
                url: "/project/" + projectId + "/detail",
                type: "get",
                success: function(data) {
                    if (data.code === 0) {
                        parent.parent.$(".layui-layer-title")[0].innerText = '【合同管理】'+data.project.projectName+'  ['+data.project.investmentSupervisionName+']';
                    } else {
                        layer.msg(data.message, { icon: 5 });
                    }
                },
                error: function(e) {
                    var d = e.responseJSON;
                    if (d) {
                        layer.msg(d.message, { icon: 5 });
                    }
                }
            });
        }();
    })
</script>
<script>
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        var result = '';
        var result2 = '';
        //多文件列表示例
        var uploadFileListView = $('#uploadFileList')
            , uploadListIns = upload.render({
            elem: '#uploadFile'
            , url: '/project/tender/upload'
            , accept: 'file'
            , multiple: true
            , auto: true
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function (index, file, result) {
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));

                    //单个重传
                    tr.find('.demo-reload').on('click', function () {
                        obj.upload(index, file);
                    });

                    //删除
                    tr.find('.demo-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });

                    uploadFileListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                console.log(res);
                if (res.code == 0) { //上传成功
                    var tr = uploadFileListView.find('tr#upload-' + index),
                        tds = tr.children();
                    tds.eq(0).html('<a href="' + res.attachment.path + '">' + res.attachment.title + '</a>');
                    tds.eq(1).html(res.attachment.createUserName);
                    tds.eq(2).html('<span style="color: #5FB878;">' + res.attachment.createTime + '</span>');
                    tds.eq(3).html('<span style="color: #5FB878;">'+(res.attachment.size/(1024*1024)).toFixed(2)+'Mb</span>');
                    tds.eq(4).html('<a class="layui-btn layui-btn-xs layui-btn-danger demo-delete" href="#" onclick="removeFile(this,' + res.attachment.id + ')">删除</a>'); //清空操作
                    layer.closeAll('loading'); //关闭loading
                    delete this.files[index]; //删除文件队列已经上传成功的文件
                    $('#uploadFileResult').append('<input type="hidden" id="attachment_' + res.attachment.id + '" name="attachment[]" value="' + res.attachment.id + '">');
                    return;
                }
                this.error(index, upload);
                layer.closeAll('loading'); //关闭loading
            }
            , error: function (index, upload) {
                var tr = uploadFileListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });

    function removeFile(obj, id) {
        layer.confirm("确认删除吗", ['确认', '取消'],
            function () {
                $.ajax({
                    dataType: "json",
                    url: "/project/tender/deleteAttachment",
                    type: "post",
                    data: {
                        attachmentId: id
                    },
                    success: function (data) {
                        if (data.code == 0) {
                            layer.msg(data.message, {icon: 1});
                            $(obj).parents("tr").remove();
                            $("#attachment_" + id).remove();
                        } else {
                            layer.msg(data.message, {icon: 5});
                        }
                    },
                    error: function (e) {
                        var d = e.responseJSON;
                        if (d) {
                            layer.msg(d.message, {icon: 5});
                        }
                    }
                })
            })
    }
</script>
</body>
</html>